```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深入理解RESTful风格架构</title>
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.8;
        }
        .hero-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 3.5rem;
            line-height: 0.65;
            margin: 0.1em 0.1em 0.1em 0;
            color: #667eea;
            font-weight: 700;
        }
        .method-get { background-color: #48bb78; }
        .method-post { background-color: #4299e1; }
        .method-put { background-color: #ed8936; }
        .method-delete { background-color: #f56565; }
        .method-head { background-color: #9f7aea; }
        .method-options { background-color: #667eea; }
        .method-patch { background-color: #38b2ac; }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-bg text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">深入理解RESTful架构风格</h1>
                    <p class="text-xl mb-8 opacity-90">构建现代Web服务的核心设计原则与实践指南</p>
                    <div class="flex space-x-4">
                        <a href="#what-is-rest" class="bg-white text-indigo-700 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition duration-300">
                            开始探索
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-full max-w-md">
                        <div class="absolute -top-6 -left-6 w-32 h-32 bg-white bg-opacity-10 rounded-full"></div>
                        <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-white bg-opacity-10 rounded-full"></div>
                        <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1711506905836-fd22083e-2863-4579-8603-e070e004e4f3.png" 
                             alt="RESTful架构图示" 
                             class="relative z-10 w-full rounded-lg shadow-2xl">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl px-4 py-12">
        <!-- What is REST -->
        <section id="what-is-rest" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-2 h-10 bg-indigo-600 mr-4"></div>
                <h2 class="text-3xl font-bold text-gray-800">什么是RESTful风格</h2>
            </div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="p-8">
                    <div class="drop-cap mb-6 text-gray-700">
                        RESTful风格是一种基于REST（Representational State Transfer）原则的软件架构风格，它强调在分布式系统中使用统一的接口和协议进行通信，以实现系统的可伸缩性、可靠性和可扩展性。
                    </div>
                    
                    <div class="my-8">
                        <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1711506905836-fd22083e-2863-4579-8603-e070e004e4f3.png" 
                             alt="RESTful架构图示" 
                             class="w-full rounded-lg shadow-md">
                    </div>
                    
                    <p class="text-gray-700 mb-6">
                        在RESTful风格中，核心概念是<strong class="text-indigo-600">资源</strong>（Resource），每个资源都有一个唯一的标识符（URI），客户端通过URI来定位和访问资源。资源的状态以及资源之间的关系通过表现形式（Representation）来表示，可以是文本、图片、XML、JSON等格式。客户端与服务器之间的通信通过HTTP协议进行，利用HTTP方法（GET、POST、PUT、DELETE等）来对资源进行<strong class="text-indigo-600">操作</strong>，例如获取资源、创建资源、更新资源和删除资源等。
                    </p>
                </div>
            </div>
        </section>

        <!-- Resources -->
        <section id="resources" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-2 h-10 bg-indigo-600 mr-4"></div>
                <h2 class="text-3xl font-bold text-gray-800">资源</h2>
            </div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="p-8">
                    <p class="text-gray-700 mb-6">
                        从资源的角度来理解RESTful风格，可以将其视为一种基于网络上可识别的资源（Resource）的架构风格，强调在分布式系统中通过统一的资源标识符（URI）对资源进行定位和操作。
                    </p>
                    
                    <div class="my-8">
                        <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1711507135150-24213415-09d9-4df5-b473-6675fd08a10b.png" 
                             alt="资源图示" 
                             class="w-full rounded-lg shadow-md">
                    </div>
                    
                    <div class="space-y-6">
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-cube mr-2 text-indigo-500"></i>
                                资源（Resource）
                            </h3>
                            <p class="text-gray-700">
                                在RESTful风格中，一切都是资源。资源可以是任何可以被命名的事物，比如用户、订单、文章、图片等。每个资源都有一个唯一的标识符（URI），用来唯一地标识这个资源。资源是系统中信息的抽象，通过URI暴露给客户端。
                            </p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-image mr-2 text-indigo-500"></i>
                                资源的表现形式（Representation）
                            </h3>
                            <p class="text-gray-700">
                                资源的表现形式是资源的具体表示形式，可以是文本、图片、XML、JSON等格式。客户端通过资源的表现形式来与资源进行交互，可以获取、创建、修改或删除资源。
                            </p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-cogs mr-2 text-indigo-500"></i>
                                资源的操作（CRUD）
                            </h3>
                            <p class="text-gray-700">
                                客户端通过HTTP协议中的不同方法（GET、POST、PUT、DELETE等）来对资源进行操作，即执行CRUD（Create、Read、Update、Delete）操作。例如，使用GET方法获取资源的表现形式，使用POST方法创建新资源，使用PUT方法更新资源，使用DELETE方法删除资源等。
                            </p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-link mr-2 text-indigo-500"></i>
                                资源的链接关系（Link Relations）
                            </h3>
                            <p class="text-gray-700">
                                资源之间可能存在各种关联关系，RESTful风格通过超媒体（Hypermedia）来描述资源之间的链接关系。每个资源的表现形式中可以包含链接到其他相关资源的链接，客户端可以通过这些链接来导航和发现资源之间的关系。
                            </p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-database mr-2 text-indigo-500"></i>
                                无状态性（Statelessness）
                            </h3>
                            <p class="text-gray-700">
                                RESTful架构强调无状态性，即服务器不会保存客户端的状态信息。每个请求都包含了足够的信息使服务器能够理解请求，从而保证了系统的可伸缩性和可靠性。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Unified Interface -->
        <section id="unified-interface" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-2 h-10 bg-indigo-600 mr-4"></div>
                <h2 class="text-3xl font-bold text-gray-800">统一接口</h2>
            </div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="p-8">
                    <p class="text-gray-700 mb-6">
                        RESTful风格通过URI、HTTP方法、资源的表现形式、自描述消息和HATEOAS等方式实现了对资源的统一接口，使得客户端和服务器之间能够通过统一的方式进行通信和交互，从而提高了系统的可用性、可维护性和可扩展性。
                    </p>
                    
                    <div class="my-8">
                        <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1711507309891-1cee5b29-3889-4a05-a2ae-0551396319e6.png" 
                             alt="统一接口图示" 
                             class="w-full rounded-lg shadow-md">
                    </div>
                    
                    <div class="space-y-6">
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-globe mr-2 text-indigo-500"></i>
                                统一资源标识符（URI）
                            </h3>
                            <p class="text-gray-700">
                                RESTful风格中的统一接口的核心概念之一是URI，即每个资源都有一个唯一的标识符，客户端通过URI来唯一定位和访问资源。URI的设计应当具有可读性、可预测性和表意性，以便客户端能够理解和正确使用。
                            </p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-exchange-alt mr-2 text-indigo-500"></i>
                                HTTP方法
                            </h3>
                            <p class="text-gray-700">
                                HTTP协议中定义了一系列的方法（也称为动词），如GET、POST、PUT、DELETE等，每个方法对应着对资源的不同操作。RESTful风格中，通过HTTP方法来对资源进行操作，实现了对资源的增删改查（CRUD）等操作。
                            </p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-file-alt mr-2 text-indigo-500"></i>
                                资源的表现形式（Representation）
                            </h3>
                            <p class="text-gray-700">
                                统一接口还包括了资源的表现形式，即资源的具体表示形式，如文本、图片、XML、JSON等格式。客户端通过资源的表现形式来与资源进行交互，根据自身需求选择合适的表现形式。
                            </p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-comment-alt mr-2 text-indigo-500"></i>
                                自描述消息（Self-descriptive Messages）
                            </h3>
                            <p class="text-gray-700">
                                RESTful架构中，每个请求和响应都应当包含足够的信息，使得消息本身能够描述其含义和用途，而不需要依赖外部的上下文。这样可以使得系统更加灵活和可扩展。
                            </p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-project-diagram mr-2 text-indigo-500"></i>
                                HATEOAS（Hypermedia As The Engine Of Application State）
                            </h3>
                            <p class="text-gray-700">
                                HATEOAS是RESTful架构的另一个重要原则，它强调客户端通过资源的表现形式中包含的超媒体链接来导航和发现资源之间的关系，从而降低了客户端与服务器之间的耦合度。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Statelessness -->
        <section id="statelessness" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-2 h-10 bg-indigo-600 mr-4"></div>
                <h2 class="text-3xl font-bold text-gray-800">无状态性</h2>
            </div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="p-8">
                    <p class="text-gray-700 mb-6">
                        无状态性是RESTful风格的一个重要原则，它强调服务器不保存客户端的状态信息，每个请求都是独立的，这样设计能够提高系统的可伸缩性和可靠性，同时简化了系统的开发和维护。可以将其视为一种设计原则，强调在分布式系统中服务器不会保存客户端的状态信息，每个请求都包含足够的信息使服务器能够理解请求，从而提高系统的可伸缩性和可靠性。
                    </p>
                    
                    <div class="my-8">
                        <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1711507621913-1fbba25c-6cae-41e0-93ac-9b88886b7913.png" 
                             alt="无状态性图示" 
                             class="w-full rounded-lg shadow-md">
                    </div>
                    
                    <div class="space-y-6">
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-info-circle mr-2 text-indigo-500"></i>
                                状态的概念
                            </h3>
                            <p class="text-gray-700">
                                在软件系统中，状态是指系统的当前情况或属性。传统的Web应用程序通常会在服务器端保存客户端的会话状态（Session State），包括用户登录状态、购物车信息等。这种状态信息会被存储在服务器的内存或数据库中。
                            </p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-ban mr-2 text-indigo-500"></i>
                                无状态性的原则
                            </h3>
                            <p class="text-gray-700">
                                RESTful风格强调无状态性，即服务器不会保存客户端的状态信息。每个请求都包含了足够的信息使服务器能够理解请求，服务器不会依赖之前的请求来处理当前的请求。这样设计可以使得服务器更加简单、可伸缩和可靠。
                            </p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-check-circle mr-2 text-indigo-500"></i>
                                优点
                            </h3>
                            <div class="pl-6">
                                <ul class="list-disc text-gray-700 space-y-2">
                                    <li><strong>可伸缩性</strong>：由于服务器不保存客户端的状态信息，所以可以更容易地实现水平扩展，即通过增加服务器的数量来处理更多的请求。</li>
                                    <li><strong>可靠性</strong>：无状态性使得服务器更加健壮，因为不会受到会话状态的影响，任何服务器都可以处理任何请求。</li>
                                    <li><strong>简化开发和维护</strong>：无状态性使得客户端和服务器之间的通信更加简单和直接，减少了开发和维护的复杂度。</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-cog mr-2 text-indigo-500"></i>
                                实现方式
                            </h3>
                            <div class="pl-6">
                                <ul class="list-disc text-gray-700 space-y-2">
                                    <li><strong>客户端提供所有必要的信息</strong>：每个请求都应当包含足够的信息使服务器能够理解和处理请求，客户端负责提供所有必要的信息，包括认证信息、会话标识符等。</li>
                                    <li><strong>服务器不保存客户端状态</strong>：服务器不会在请求之间保留客户端的状态信息，每个请求都是独立的，服务器不依赖于之前的请求来处理当前的请求。</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Representations -->
        <section id="representations" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-2 h-10 bg-indigo-600 mr-4"></div>
                <h2 class="text-3xl font-bold text-gray-800">资源的表现形式</h2>
            </div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="p-8">
                    <p class="text-gray-700 mb-6">
                        从资源表现形式的角度来看，RESTful风格通过多样化、自描述性和超媒体等方式实现了资源状态的呈现，使得客户端能够以简洁、可读性强和易于理解的方式与资源进行交互，从而提高了系统的可用性和可维护性。
                    </p>
                    
                    <div class="my-8">
                        <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1711507664908-6ec09493-061a-487e-8cff-107050f4c93b.png" 
                             alt="资源表现形式图示" 
                             class="w-full rounded-lg shadow-md">
                    </div>
                    
                    <div class="space-y-6">
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-file mr-2 text-indigo-500"></i>
                                资源的表现形式（Representation）
                            </h3>
                            <p class="text-gray-700">
                                在RESTful风格中，资源的状态以及资源之间的关系通过资源的表现形式来表示。资源的表现形式可以是各种格式，如文本、图片、XML、JSON等。客户端通过资源的表现形式来与资源进行交互，并根据自身的需求选择合适的表现形式。
                            </p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-book-reader mr-2 text-indigo-500"></i>
                                可读性和可预测性
                            </h3>
                            <p class="text-gray-700">
                                资源的表现形式应当具有良好的可读性和可预测性，使得客户端能够轻松理解和正确使用资源。例如，使用清晰的命名规范、一致的数据格式和规范的结构，可以提高资源的可读性和可预测性。
                            </p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-comment-dots mr-2 text-indigo-500"></i>
                                自描述性（Self-descriptive）
                            </h3>
                            <p class="text-gray-700">
                                资源的表现形式应当包含足够的信息，使得消息本身能够描述其含义和用途，而不需要依赖外部的上下文。这样可以使得客户端能够独立地理解资源的含义和用途，降低了客户端与服务器之间的耦合度。
                            </p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-shapes mr-2 text-indigo-500"></i>
                                多样性和灵活性
                            </h3>
                            <p class="text-gray-700">
                                RESTful风格允许资源的表现形式可以是多样化的，可以根据客户端的需求和偏好选择合适的表现形式。这种灵活性使得RESTful API能够适应不同的客户端和应用场景，提高了系统的可扩展性和适应性。
                            </p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-link mr-2 text-indigo-500"></i>
                                超媒体（Hypermedia）
                            </h3>
                            <p class="text-gray-700">
                                超媒体是一种资源的表现形式，其中包含了与其他相关资源之间的链接关系。通过超媒体，客户端可以通过资源的表现形式中包含的超链接来导航和发现资源之间的关系，从而提高了系统的灵活性和可发现性。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- HTTP Methods -->
        <section id="http-methods" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-2 h-10 bg-indigo-600 mr-4"></div>
                <h2 class="text-3xl font-bold text-gray-800">HTTP方法</h2>
            </div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="p-8">
                    <p class="text-gray-700 mb-6">
                        通过不同的HTTP方法，RESTful风格定义了一组标准的操作，使得客户端和服务器之间能够以统一的方式进行资源的增删改查操作。这种设计简化了系统的架构，提高了系统的可维护性和可扩展性，同时使得系统更符合HTTP协议的语义。
                    </p>
                    
                    <div class="my-8">
                        <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1711507735815-f19d0e1b-f40e-4dc3-b334-94bd77d56751.png" 
                             alt="HTTP方法图示" 
                             class="w-full rounded-lg shadow-md">
                    </div>
                    
                    <div class="space-y-8">
                        <div class="p-6 rounded-lg bg-gray-50 border border-gray-200">
                            <div class="flex items-center mb-4">
                                <span class="method-get text-white px-3 py-1 rounded-md text-sm font-medium mr-3">GET</span>
                                <h3 class="text-xl font-semibold text-gray-800">GET方法</h3>
                            </div>
                            <div class="pl-12">
                                <ul class="list-disc text-gray-700 space-y-2">
                                    <li>用于获取资源的表现形式，不会对资源进行修改。</li>
                                    <li>通常用于读取资源的信息，例如获取文章内容、查看用户信息等。</li>
                                    <li>GET请求应该是幂等的，即多次重复的GET请求应该产生相同的结果。</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="p-6 rounded-lg bg-gray-50 border border-gray-200">
                            <div class="flex items-center mb-4">
                                <span class="method-post text-white px-3 py-1 rounded-md text-sm font-medium mr-3">POST</span>
                                <h3 class="text-xl font-semibold text-gray-800">POST方法</h3>
                            </div>
                            <div class="pl-12">
                                <ul class="list-disc text-gray-700 space-y-2">
                                    <li>用于创建新资源，或者对现有资源进行处理，不同情况下有不同的语义。</li>
                                    <li>通常用于提交表单数据、上传文件、执行数据处理等。</li>
                                    <li>POST请求不是幂等的，即多次重复的POST请求可能会产生不同的结果。</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="p-6 rounded-lg bg-gray-50 border border-gray-200">
                            <div class="flex items-center mb-4">
                                <span class="method-put text-white px-3 py-1 rounded-md text-sm font-medium mr-3">PUT</span>
                                <h3 class="text-xl font-semibold text-gray-800">PUT方法</h3>
                            </div>
                            <div class="pl-12">
                                <ul class="list-disc text-gray-700 space-y-2">
                                    <li>用于更新现有资源，或者创建新资源（如果资源不存在）。</li>
                                    <li>通常用于更新文章内容、修改用户信息等。</li>
                                    <li>PUT请求应该是幂等的，即多次重复的PUT请求应该产生相同的结果。</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="p-6 rounded-lg bg-gray-50 border border-gray-200">
                            <div class="flex items-center mb-4">
                                <span class="method-delete text-white px-3 py-1 rounded-md text-sm font-medium mr-3">DELETE</span>
                                <h3 class="text-xl font-semibold text-gray-800">DELETE方法</h3>
                            </div>
                            <div class="pl-12">
                                <ul class="list-disc text-gray-700 space-y-2">
                                    <li>用于删除指定的资源。</li>
                                    <li>通常用于删除文章、删除用户等。</li>
                                    <li>DELETE请求应该是幂等的，即多次重复的DELETE请求应该产生相同的结果。</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3">其他HTTP方法</h3>
                            <div class="grid gap-4 md:grid-cols-2">
                                <div class="p-4 rounded-lg bg-gray-50 border border-gray-200">
                                    <div class="flex items-center mb-2">
                                        <span class="method-head text-white px-3 py-1 rounded-md text-sm font-medium mr-3">HEAD</span>
                                        <h4 class="font-medium text-gray-800">HEAD</h4>
                                    </div>
                                    <p class="text-gray-700 pl-12">与GET方法类似，但只返回资源的头部信息，不返回实际内容。</p>
                                </div>
                                <div class="p-4 rounded-lg bg-gray-50 border border-gray-200">
                                    <div class="flex items-center mb-2">
                                        <span class="method-options text-white px-3 py-1 rounded-md text-sm font-medium mr-3">OPTIONS</span>
                                        <h4 class="font-medium text-gray-800">OPTIONS</h4>
                                    </div>
                                    <p class="text-gray-700 pl-12">用于获取目标资源支持的HTTP方法。</p>
                                </div>
                                <div class="p-4 rounded-lg bg-gray-50 border border-gray-200">
                                    <div class="flex items-center mb-2">
                                        <span class="method-patch text-white px-3 py-1 rounded-md text-sm font-medium mr-3">PATCH</span>
                                        <h4 class="font-medium text-gray-800">PATCH</h4>
                                    </div>
                                    <p class="text-gray-700 pl-12">用于对资源的局部更新，仅修改资源的部分内容。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Status Codes -->
        <section id="status-codes" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-2 h-10 bg-indigo-600 mr-4"></div>
                <h2 class="text-3xl font-bold text-gray-800">状态码</h2>
            </div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="p-8">
                    <p class="text-gray-700 mb-6">
                        通过使用标准的HTTP状态码，RESTful风格使得客户端能够清晰地了解请求处理的结果和相关信息，同时也能够提供更好的错误处理和调试能力。这种设计使得系统更加稳定、可靠，同时也更符合HTTP协议的语义。
                    </p>
                    
                    <div class="my-8">
                        <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1711507917960-5a88806d-57c8-4622-b546-ad0263690a15.png" 
                             alt="状态码图示" 
                             class="w-full rounded-lg shadow-md">
                    </div>
                    
                    <div class="space-y-6">
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-check-circle mr-2 text-green-500"></i>
                                成功的状态码
                            </h3>
                            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                                <div class="p-4 bg-green-50 border border-green-100 rounded-lg">
                                    <div class="flex items-center">
                                        <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm font-medium mr-2">200</span>
                                        <span class="font-medium">OK</span>
                                    </div>
                                    <p class="text-gray-700 mt-2 text-sm">表示请求成功，并返回相应的资源。</p>
                                </div>
                                <div class="p-4 bg-green-50 border border-green-100 rounded-lg">
                                    <div class="flex items-center">
                                        <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm font-medium mr-2">201</span>
                                        <span class="font-medium">Created</span>
                                    </div>
                                    <p class="text-gray-700 mt-2 text-sm">表示资源创建成功，通常在使用POST方法创建新资源时返回。</p>
                                </div>
                                <div class="p-4 bg-green-50 border border-green-100 rounded-lg">
                                    <div class="flex items-center">
                                        <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm font-medium mr-2">204</span>
                                        <span class="font-medium">No Content</span>
                                    </div>
                                    <p class="text-gray-700 mt-2 text-sm">表示请求成功，但响应中没有返回任何内容，通常用于表示删除操作成功。</p>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-redo mr-2 text-blue-500"></i>
                                重定向的状态码
                            </h3>
                            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                                <div class="p-4 bg-blue-50 border border-blue-100 rounded-lg">
                                    <div class="flex items-center">
                                        <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm font-medium mr-2">301</span>
                                        <span class="font-medium">Moved Permanently</span>
                                    </div>
                                    <p class="text-gray-700 mt-2 text-sm">表示资源的URI已永久移动到新的位置。</p>
                                </div>
                                <div class="p-4 bg-blue-50 border border-blue-100 rounded-lg">
                                    <div class="flex items-center">
                                        <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm font-medium mr-2">302</span>
                                        <span class="font-medium">Found</span>
                                    </div>
                                    <p class="text-gray-700 mt-2 text-sm">表示资源的URI暂时移动到新的位置。</p>
                                </div>
                                <div class="p-4 bg-blue-50 border border-blue-100 rounded-lg">
                                    <div class="flex items-center">
                                        <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm font-medium mr-2">303</span>
                                        <span class="font-medium">See Other</span>
                                    </div>
                                    <p class="text-gray-700 mt-2 text-sm">表示客户端应该使用GET方法重新定向到另一个URI获取资源。</p>
                                </div>
                                <div class="p-4 bg-blue-50 border border-blue-100 rounded-lg">
                                    <div class="flex items-center">
                                        <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm font-medium mr-2">307</span>
                                        <span class="font-medium">Temporary Redirect</span>
                                    </div>
                                    <p class="text-gray-700 mt-2 text-sm">与302类似，但要求客户端保持原有的请求方法。</p>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-exclamation-triangle mr-2 text-yellow-500"></i>
                                客户端错误的状态码
                            </h3>
                            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                                <div class="p-4 bg-yellow-50 border border-yellow-100 rounded-lg">
                                    <div class="flex items-center">
                                        <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm font-medium mr-2">400</span>
                                        <span class="font-medium">Bad Request</span>
                                    </div>
                                    <p class="text-gray-700 mt-2 text-sm">表示请求存在语法错误或无法理解的参数。</p>
                                </div>
                                <div class="p-4 bg-yellow-50 border border-yellow-100 rounded-lg">
                                    <div class="flex items-center">
                                        <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm font-medium mr-2">401</span>
                                        <span class="font-medium">Unauthorized</span>
                                    </div>
                                    <p class="text-gray-700 mt-2 text-sm">表示请求需要身份验证。</p>
                                </div>
                                <div class="p-4 bg-yellow-50 border border-yellow-100 rounded-lg">
                                    <div class="flex items-center">
                                        <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm font-medium mr-2">403</span>
                                        <span class="font-medium">Forbidden</span>
                                    </div>
                                    <p class="text-gray-700 mt-2 text-sm">表示服务器拒绝执行请求，通常是由于权限不足。</p>
                                </div>
                                <div class="p-4 bg-yellow-50 border border-yellow-100 rounded-lg">
                                    <div class="flex items-center">
                                        <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm font-medium mr-2">404</span>
                                        <span class="font-medium">Not Found</span>
                                    </div>
                                    <p class="text-gray-700 mt-2 text-sm">表示请求的资源不存在。</p>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-times-circle mr-2 text-red-500"></i>
                                服务器错误的状态码
                            </h3>
                            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                                <div class="p-4 bg-red-50 border border-red-100 rounded-lg">
                                    <div class="flex items-center">
                                        <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-sm font-medium mr-2">500</span>
                                        <span class="font-medium">Internal Server Error</span>
                                    </div>
                                    <p class="text-gray-700 mt-2 text-sm">表示服务器遇到了意外的错误，无法完成请求。</p>
                                </div>
                                <div class="p-4 bg-red-50 border border-red-100 rounded-lg">
                                    <div class="flex items-center">
                                        <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-sm font-medium mr-2">503</span>
                                        <span class="font-medium">Service Unavailable</span>
                                    </div>
                                    <p class="text-gray-700 mt-2 text-sm">表示服务器当前无法处理请求，通常是由于过载或维护等原因。</p>
                                </div>
                                <div class="p-4 bg-red-50 border border-red-100 rounded-lg">
                                    <div class="flex items-center">
                                        <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-sm font-medium mr-2">504</span>
                                        <span class="font-medium">Gateway Timeout</span>
                                    </div>
                                    <p class="text-gray-700 mt-2 text-sm">表示请求超时，通常是由于网关或代理服务器无法及时响应请求。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Example -->
        <section id="example" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-2 h-10 bg-indigo-600 mr-4"></div>
                <h2 class="text-3xl font-bold text-gray-800">示例</h2>
            </div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="p-8">
                    <p class="text-gray-700 mb-6">
                        以下是一个简单的使用Spring Boot实现的RESTful风格的示例，演示了如何创建文章资源并进行查看、修改和删除操作：
                    </p>
                    
                    <div class="bg-gray-800 rounded-lg overflow-hidden">
                        <div class="flex items-center px-4 py-2 bg-gray-700">
                            <div class="flex space-x-2 mr-4">
                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                            <span class="text-gray-300 text-sm">ArticleController.java</span>
                        </div>
                        <pre class="p-4 text-gray-100 overflow-x-auto"><code class="language-java">@RestController
@RequestMapping("/articles")
public class ArticleController {

    private List&lt;Article&gt; articles = new ArrayList&lt;&gt;();

    // 获取所有文章
    @GetMapping
    public List&lt;Article&gt; getAllArticles() {
        return articles;
    }

    // 获取指定ID的文章
    @GetMapping("/{id}")
    public ResponseEntity&lt;Article&gt; getArticleById(@PathVariable("id") long id) {
        Article article = findArticleById(id);
        if (article != null) {
            return ResponseEntity.ok(article);
        } else {
            return ResponseEntity.notFound().build();
        }
    }

    // 创建新文章
    @PostMapping
    public ResponseEntity&lt;Article&gt; createArticle(@RequestBody Article article) {
        articles.add(article);
        return ResponseEntity.status(HttpStatus.CREATED).body(article);
    }

    // 更新指定ID的文章
    @PutMapping("/{id}")
    public ResponseEntity&lt;Article&gt; updateArticle(@PathVariable("id") long id, @RequestBody Article updatedArticle) {
        Article existingArticle = findArticleById(id);
        if (existingArticle != null) {
            existingArticle.setTitle(updatedArticle.getTitle());
            existingArticle.setContent(updatedArticle.getContent());
            return ResponseEntity.ok(existingArticle);
        } else {
            return ResponseEntity.notFound().build();
        }
    }

    // 删除指定ID的文章
    @DeleteMapping("/{id}")
    public ResponseEntity&lt;Void&gt; deleteArticle(@PathVariable("id") long id) {
        Article article = findArticleById(id);
        if (article != null) {
            articles.remove(article);
            return ResponseEntity.noContent().build();
        } else {
            return ResponseEntity.notFound().build();
        }
    }

    // 辅助方法：根据ID查找文章
    private Article findArticleById(long id) {
        for (Article article : articles) {
            if (article.getId() == id) {
                return article;
            }
        }
        return null;
    }
}</code></pre>
                    </div>
                    
                    <div class="mt-8 bg-indigo-50 rounded-lg p-6 border border-indigo-100">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-info-circle text-indigo-500 mr-2"></i>
                            <h3 class="text-lg font-semibold text-indigo-800">代码说明</h3>
                        </div>
                        <p class="text-gray-700">
                            在这个示例中，我们创建了一个ArticleController类来处理与文章资源相关的操作。使用了Spring Boot的注解来定义RESTful风格的API，包括GET、POST、PUT和DELETE方法。通过HTTP方法和路径来定义不同的操作，同时使用状态码和响应实体来表示请求处理的结果。
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Concept Diagram -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-2 h-10 bg-indigo-600 mr-4"></div>
                <h2 class="text-3xl font-bold text-gray-800">RESTful核心概念关系图</h2>
            </div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover p-6">
                <div class="mermaid">
                    graph TD
                        A[RESTful架构] --> B[资源(Resource)]
                        A --> C[统一接口]
                        A --> D[无状态性]
                        A --> E[资源表现形式]
                        
                        B --> F[URI标识]
                        B --> G[CRUD操作]
                        B --> H[超媒体链接]
                        
                        C --> I[HTTP方法]
                        C --> J[自描述消息]
                        C --> K[HATEOAS]
                        
                        D --> L[独立请求]
                        D --> M[服务器不保存状态]
                        
                        E --> N[多种格式]
                        E --> O[可读性]
                        E --> P[超媒体]
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="flex flex-col items-center">
                <div class="text-xl font-medium mb-4">技术小馆</div>
                <a href="http://www.yuque.com/jtostring" class="text-indigo-400 hover:text-indigo-300 transition duration-300">
                    http://www.yuque.com/jtostring
                </a>
                <div class="mt-8 text-sm text-gray-500">
                    © 2023 技术小馆. All rights reserved.
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            themeVariables: {
                primaryColor: '#667eea',
                primaryTextColor: '#fff',
                primaryBorderColor: '#4c51bf',
                lineColor: '#a0aec0',
                textColor: '#2d3748',
                fontSize: '14px'
            }
        });
    </script>
</body>
</html>
```